import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue';

const router = createRouter({
	history: createWebHistory(import.meta.env.BASE_URL),
	routes: [
		{
			path: '/',
			name: 'home',
			component: HomeView
		},
		{
			path: '/about',
			name: 'About_toRefs',
			// 导航守卫
			beforeEnter: (to, from, next) => {
				console.log('导航守卫来了');
				// 登录判断
				if (true) {
					next();
				} else {
					next('/login');
				}
			},
			component: () => import('../views/About_toRefs.vue')
		},
		{
			path: '/vue2',
			name: 'About_vue2',
			component: () => import('../views/About_vue2.vue')
		},
		{
			path: '/vue3',
			name: 'About_vue3',
			component: () => import('../views/About_vue3.vue')
		},
		{
			// 监听
			path: '/watch',
			name: 'About_watch',
			component: () => import('../views/About_watch.vue')
		},
		{
			// 生命周期
			path: '/life',
			name: 'About_life',
			component: () => import('../views/About_life.vue')
		},
		{
			// 路由
			path: '/router',
			name: 'About_router',
			component: () => import('../views/About_router.vue')
		},
		{
			// 组件
			path: '/comp',
			name: 'About_comp',
			component: () => import('../views/About_comp.vue')
		},
		{
			// 插槽
			path: '/slot',
			name: 'About_slot',
			component: () => import('../views/About_slot.vue')
		},
		{
			// 传送
			path: '/tele',
			name: 'About_teleport',
			component: () => import('../views/About_teleport.vue')
		},
		{
			// 动态组件
			path: '/Dyna',
			name: 'About_Dynamic',
			component: () => import('../views/About_Dynamic.vue')
		},
		{
			// 异步组件
			path: '/async',
			name: 'About_Async',
			component: () => import('../views/About_Async.vue')
		},
		{
			// 混入Mixin
			path: '/mixin',
			name: 'about_Mixin',
			component: () => import('../views/about_Mixin.vue')
		},
		{
			// 依赖注入Provide/Inject
			path: '/Prov',
			name: 'about_Provide',
			component: () => import('../views/about_Provide.vue')
		},
		,
		{
			// vuex
			path: '/vuex',
			name: 'about_vuex',
			component: () => import('../views/about_vuex.vue')
		},
		{
			// Pinia
			path: '/pinia',
			name: 'about_Pinia',
			component: () => import('../views/about_pinia.vue')
		},
		{
			// API解耦合
			path: '/slider',
			name: 'about_slider',
			component: () => import('../views/about_slider.vue')
		}
	]
});

export default router;
